---
import prefabs from 'prefabs/index.js';

import Layout from 'layouts/Layout.astro';

const title = 'Cookie policy';
const subtitle = 'Understand how we use cookies.';
const pageDescription = 'Read about the cookie policy of 30 seconds of code.';
---

<Layout title={title} description={pageDescription}>
  <div class='g-c2'>
    <h2 class={prefabs.staticPageTitle}>{title}</h2>
    <p class='my-0 mx-3.5 txt-100'>{subtitle}</p>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>What are cookies</h3>
      <div class='card-description'>
        <p>
          As is common practice with almost all professional websites this site
          uses cookies, which are tiny files that are downloaded to your
          computer, to improve your experience. This page describes what
          information they gather, how we use it and why we sometimes need to
          store these cookies. We will also share how you can prevent these
          cookies from being stored however this may downgrade or "break"
          certain elements of the sites functionality.
        </p>
      </div>
    </div>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>How we use cookies</h3>
      <div class='card-description'>
        <p>
          We use cookies for a variety of reasons detailed below. Unfortunately
          in most cases there are no industry standard options for disabling
          cookies without completely disabling the functionality and features
          they add to this site. It is recommended that you leave on all cookies
          if you are not sure whether you need them or not in case they are used
          to provide a service that you use.
        </p>
      </div>
    </div>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>Disabling cookies</h3>
      <div class='card-description'>
        <p>
          You can prevent the setting of cookies by adjusting the settings on
          your browser (see your browser Help for how to do this). Be aware that
          disabling cookies will affect the functionality of this and many other
          websites that you visit. Disabling cookies will usually result in also
          disabling certain functionality and features of the this site.
          Therefore it is recommended that you do not disable cookies.
        </p>
      </div>
    </div>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>The cookies we set</h3>
      <div class='card-description'>
        <h4 class='lh-tight fs-sm md:fs-md mt-6 mx-0 mb-0'>
          <strong>Site preference cookies</strong>
        </h4>
        <p>
          In order to provide you with a great experience on this site we
          provide the functionality to set your preferences for how this site
          runs when you use it. In order to remember your preferences we need to
          set cookies so that this information can be called whenever you
          interact with a page is affected by your preferences.
        </p>
        <h4 class='lh-tight fs-sm md:fs-md mt-6 mx-0 mb-0'>
          <strong>Third party cookies</strong>
        </h4>
        <p>
          In some special cases we also use cookies provided by trusted third
          parties. The following section details which third party cookies you
          might encounter through this site.
        </p>
        <h4 class='lh-tight fs-sm md:fs-md mt-6 mx-0 mb-0'>
          <strong>Google Analytics cookies</strong>
        </h4>
        <p>
          This site uses Google Analytics which is one of the most widespread
          and trusted analytics solutions on the web in order to help us
          understand how you use the site and ways that we can improve your
          experience. These cookies may track things such as how long you spend
          on the site and the pages that you visit so we can continue to produce
          engaging content.
        </p>
        <p>
          For more information on Google Analytics cookies, see the official <a
            href='https://developers.google.com/analytics/devguides/collection/gajs/cookie-usage'
            target='_blank'
            rel='noopener noreferrer'>Google Analytics page</a
          >.
        </p>
      </div>
    </div>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>More information</h3>
      <div class='card-description'>
        <p>
          Hopefully that has clarified things for you and as was previously
          mentioned if there is something that you aren't sure whether you need
          or not it's usually safer to leave cookies enabled in case it does
          interact with one of the features you use on our site. However if you
          are still looking for more information then you can contact us via
          email at <a
            href='mailto:30secondsofcode@gmail.org?subject=Cookie policy'
            >30secondsofcode@gmail.org</a
          >.
        </p>
      </div>
    </div>
    <div class={prefabs.simpleCard}>
      <h3 class={prefabs.secondaryCardTitle}>Cookie preferences</h3>
      <div class='card-description'>
        <p>You can update your cookie preferences using the checkbox below.</p>
        <label class='flex a-center md:fs-md mt-2'>
          <input class='mr-2 cookie-consent-checkbox' type='checkbox' />
          Accept cookies
        </label>
      </div>
    </div>
  </div>
</Layout>
